<html xmlns:th="http://www.thymeleaf.org">
<head th:include="layout :: htmlhead" th:with="title='favorites'"></head>
<body>
      <section>
         <div class="content-wrapper">
            <h3>At我的</h3>
            <div class="row">
               <div class="col-lg-12 col-md-12 mt">
                  <ul class="timeline">
                     <li th:each="collect,collectStat : ${collects}" >
                        <div class="timeline-panel">
                           <div class="popover right">
                              <div class="popover-content">
                                 <div class="table-grid table-grid-align-middle mb">
                                    <div class="col col-xxs">
                                       <a href="javascript:void(0);" th:onclick="'locationUrl(\'/user/' + ${collect.userId} + '/0\',\'\');'">
                                          <img th:src="${collect.profilePicture == null?'img/favicon.png':collect.profilePicture}" alt="" class="media-object img-circle thumb48"/>
                                       </a>
                                    </div>
                                    <div class="col">
                                       <p class="m0">
                                          <a href="javascript:void(0);" class="text-muted" th:text="${collect.userName}" th:onclick="'locationUrl(\'/user/' + ${collect.userId} + '/0\',\'\');'" >user name</a>
                                          <small class="ml" th:text="${collect.collectTime}">
                                          </small>
                                       </p>
                                    </div>
                                    <div class="col text-right">
                                       <div class="btn btn-default">回复</div>
                                    </div>
                                 </div>
                                 <div class="m0" th:text="${collect.remark}"></div>
                                 <div class="media resource-card-thumbnail">
                                    <a th:href="@{${collect.url}}" class="pull-left" target="_blank">
                                       <div class="media-object resource-card-image" th:style="'background-image:url(' + @{(${collect.logoUrl}=='' ? 'img/favicon.png' : ${collect.logoUrl})} + ')'" ></div>
                                    </a>                                   
                                    <div class="media-body">
                                       <h4 class="visible-xs media-heading resource-card-title-xs">
                                          <a target="_blank" th:href="@{${collect.url}}" th:text="${collect.title}">title</a>
                                       </h4>
                                       <h3 class="hidden-xs media-heading resource-card-title">
                                          <a target="_blank" th:href="@{${collect.url}}" th:text="${collect.title}">title</a>
                                       </h3>
                                       <div class="hidden-xs" style="max-height:42px;overflow:hidden;">
                                          <p th:text="${collect.description}">description</p>
                                       </div>
                                    </div>
                                 </div>
                                 <div th:if="${collect.url == null}"><h3>该分享已被删除</h3></div>
                                 <div class="collapse">
                                    <div class="media">
                                       <div class="media-body">
                                          <form id="form" data-parsley-validate="true" onsubmit="return false">
                                             <div class="input-group">                                            	
	                                                <input name="content" type="text" class="form-control" placeholder="输入回复..." required="required"/>
	                                                <input name="replyUserId" type="hidden" th:value="${collect.userId}"/>
	                                                <input name="collectId" type="hidden" th:value="${collect.id}"/>
	                                                <span class="input-group-btn">
	                                                   <button id="sendReply" type="submit" class="btn btn-default send">发送</button>
	                                                </span>
                                             </div>
                                          </form>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </li>
                  </ul>
               </div>
               <div class="col-lg-3 col-md-3"></div>
            </div>
         </div>
      </section>
</body>
 <script type='text/javascript'>
 $(function(){
	 $(".timeline li").each(function(){
         var _this = $(this);
         _this.find(".table-grid .btn").click(function(){
            if(_this.find(".collapse").hasClass('in')){
               _this.find(".collapse").removeClass('in')
            }else{
               _this.find(".collapse").addClass('in')
               var rep = "@"+_this.find(".m0 .text-muted").html()+" ";
               _this.find(".form-control").focus().val(rep);
            }
         });
      });
	 $(".btn.btn-default.send").click(function(){
		 var _this = $(this).parent().parent().parent().parent().parent().parent();
		 var _form = $(this).parent().parent().parent();
		 var ok = _form.parsley().isValid({force: true});
		 if(ok){
			var url = '/comment/add';
			$.ajax({
				url : url,
				data : _form.serialize(),
				type : 'POST',
				dataType : "json",
				error : function(XMLHttpRequest, textStatus, errorThrown) {
				},
				success : function(data, textStatus) {
					if(data.rspCode == '000000'){
						toastr.success('已回复！', '操作成功');
						_form[0].reset(); 
						if( _this.hasClass('in')){
							_this.removeClass('in');
						}
					}					
				}
			});
		 }
	 });
 });
 </script>
</html>